<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-11 19:58:43
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-03-13 19:01:13
 * @FilePath: \fe_user_pc\src\views\shotstack\CreationCenter\VideoSplit.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref, reactive, onMounted, getCurrentInstance, watch, computed, onUnmounted, nextTick, onBeforeMount, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router';
// 导入调试的video
// import video from './static/曼谷日落时的鸟瞰图_爱给网_aigei_com.mp4'
// 导入通用工具
import request from '@/common/utils/request'
import utils from '@/common/utils/utils'
import { getCurrentTeam } from '@/common/utils/storage'
import { message, Modal } from 'ant-design-vue';
import { useRouter } from 'vue-router'
const router = useRouter()
// 组件
// import MaterialsModule from '@/views/shotstack/components/MaterialsModule/index.vue'

import MaterialsModule from "@/views/shotstack/components/MaterialsModule/materialLibraryModal.vue";

import lodingModel from '@/components/lodingModel/lodingModel.vue'
// import { createFFmpeg, fetchFile } from '@ffmpeg/core';
// import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const internalInstance = getCurrentInstance()

// 弹窗组件
const materials = ref(null)
// 加载组件
const loding = ref(null)
const route = useRoute();

// 视频帧图片数组
const imgArr = ref([])
const imgArrClone = ref([])

// 异步获取视频切割信息
const splitData = ref(null)

// 截取视频时间节点
const frameTimes = ref(null)
// 时间节点克隆
const frameTimesClone = ref(null)
// 视频帧间隔
let interval = ref(0.25)

// 控制操作游标高亮显示
const active = ref(0)
// 存储当前标记的时间点
const markTime = ref([])
// 元素背景色
const bgColor = ref('#f7e1e5') // 或者 #e8f4fe
// 视频元素
const videoElement = ref(null)
// 视频标题
const title = ref([])

// 处理时间点排序
const sortMarkTime = computed(() => {
    return markTime.value.sort((a, b) => a - b)
})

// 备份用于重置的数据
const markTimeClone = ref([])

// 控制 选择的point
const selectPoint = ref(null)

// 获取视频id
const videoId = computed(() => {
    return route.query.id || null
})

// 保存弹窗开关
const saveVisible = ref(false)
// 保存弹窗数据
const currentSaveData = ref({})
// 保存弹窗发送请求数据

// ffmprg  优化渲染 视频帧
// const ffmpegPromise = createFFmpeg({ log: true });

onMounted(() => {
    // 存在视频id, 获取视频信息
    if (videoId.value) {
        getVedioSplitInfo()
        // 侦听 window的按键事件
        window.addEventListener('keydown', keydown);
        window.addEventListener('click', WindowClick);
        videoElement.value.addEventListener('ended', () => {
            isPlaying.value = false; // 设置为暂停状态
        })
    }


})


onBeforeUnmount(() => {
    videoElement.value.removeEventListener('ended', () => {
        isPlaying.value = false; // 设置为暂停状态
    })
})

// 销毁事件
onUnmounted(() => {
    window.removeEventListener('keydown', keydown);
    window.removeEventListener('click', WindowClick);
    // console.log(videoElement.value,'videoElement.value');

})

// 是否展示弹窗
const isShow = ref(false)

// 口播文字加载中
const textLoding = ref(false)


const forTime = ref(0)

// ffmpeg  优化渲染 视频帧
// const getVedioSplitInfo = async () => {
//     // 不存在视频id
//     if (!videoId) {
//         message.error('视频id不存在');
//         return;
//     }
//     textLoding.value = true;
//     loding.value.showModal('');

//     try {
//         const videoData = await request.get('/work_ai', `/user/shotstack/video/video_to_clips/detail?id=${videoId.value}`);
//         const { material_duration, clip_points, origin_clips, status, split_type_text } = videoData.result
//         // 赋值保存到本地
//         splitData.value = videoData.result
//         title.value = [route.meta.title, split_type_text]
//         // 创建FFmpeg.js的新实例
//         const ffmpeg = createFFmpeg({ log: true,  workerLimit: 1 });

//         await ffmpeg.load(); // 确保FFmpeg加载完成

//         // 直接使用API返回的视频时长
//         const videoDuration = videoData.result.material_duration;

//         const videoElement = document.querySelector('#videoElement')
//         const videoUrl = videoData.result?.video?.material_url


//         videoElement.src = videoUrl + '?v=' + (new Date()).valueOf()
//         forTime.value = Math.ceil(videoDuration * (1 / interval.value));
//         const videoPath = videoData.result.video.material_url;
//         // 分块下载视频文件
//         const videoBlob = await downloadInChunks(videoPath, 1024 * 1024);
//         const videoArrayBuffer = await new Response(videoBlob).arrayBuffer();
//         ffmpeg.FS('writeFile', 'video.mp4', await fetchFile(videoArrayBuffer));

//         // 运行FFmpeg命令提取视频帧
//         await ffmpeg.run('-threads', '1', '-i', 'video.mp4', '-vf', `fps=fps=${1 / interval.value}`, '-frames:v', `${forTime.value}`, 'frame%03d.jpg');

//         // 新增的分批处理逻辑
//         const batchSize = 1000; // 每批处理的帧数
//         for (let batchStart = 1; batchStart < forTime.value; batchStart += batchSize) {
//             const batchEnd = Math.min(batchStart + batchSize - 1, forTime.value);
//             await processBatch(ffmpeg, batchStart, batchEnd);
//         }

//         // 关闭加载中状态
//         isShow.value = false;
//         loding.value.closeModal();
//         textLoding.value = false;
//     } catch (error) {
//         console.error('Error processing video:', error);
//         isShow.value = false
//         loding.value.closeModal()
//         textLoding.value = false
//     }
// };

// const processBatch = async (ffmpeg, start, end) => {

//     // 多线程
//     // const framePromises = [];
//     // for (let i = start; i <= end; i++) {
//     //     let paddedString = i.toString().padStart(3, '0');
//     //     framePromises.push(processFrame(ffmpeg, paddedString, i));
//     // }
//     // await Promise.all(framePromises);

//     // 单线程
//     for (let i = start; i <= end; i++) {
//         let paddedString = i.toString().padStart(3, '0');
//         await processFrame(ffmpeg, paddedString, i);
//     }
// };


// const processFrame = async (ffmpeg, paddedString, i) => {
//     const data = ffmpeg.FS('readFile', `frame${paddedString}.jpg`);
//     const base64ImageData = btoa(String.fromCharCode(...new Uint8Array(data)));

//     imgArr.value.push({
//         ruler: i === 1,
//         src: `data:image/jpeg;base64,${base64ImageData}`,
//         time: i * interval.value,
//         text: ""
//     });

//     // 更新进度条
//     const s1 = Math.floor((i + 1) / forTime.value * 100);
//     const progressPercentage = Math.floor((i + 1) / s1 * 100);

//     if (progressPercentage <= 100) {
//         loding.value && loding.value.updatePercent(progressPercentage);
//     }
// };

// // 分包下载 3.0
// const downloadInChunks = async (url, chunkSize = 1024 * 1024, maxConcurrentRequests = 5) => {
//     const response = await fetch(url);
//     if (!response.ok) {
//         throw new Error(`Failed to fetch data from ${url}`);
//     }
//     const totalSize = parseInt(response.headers.get('Content-Length'), 10);
//     const numChunks = Math.ceil(totalSize / chunkSize);
//     let chunks = [];
//     const chunkPromises = [];
//     let completedChunks = 0;

//     // 创建 AbortController 实例
//     const controller = new AbortController();
//     const signal = controller.signal;

//     // 下载进度回调函数
//     const onProgress = (progress) => {
//         loding.value && loding.value.updatePercent(progress);
//     };

//     // 开始下载所有块
//     for (let i = 0; i < numChunks; i++) {
//         const start = i * chunkSize;
//         const end = Math.min((i + 1) * chunkSize - 1, totalSize - 1);
//         chunkPromises.push(downloadChunk(url, start, end, signal, totalSize, i));
//     }

//     // 控制并发请求数量
//     while (chunkPromises.length > 0) {
//         const promisesToProcess = chunkPromises.splice(0, maxConcurrentRequests);
//         await Promise.all(promisesToProcess.map(promise => promise.catch(error => {
//         })));
//     }

//     // 清理AbortController
//     controller.abort();

//     return new Blob(chunks);

//     async function downloadChunk(url, start, end, signal, totalSize, index) {
//         const response = await fetch(url, {
//             headers: { Range: `bytes=${start}-${end}` },
//             signal,
//         });
//         if (!response.ok) {
//             throw new Error(`Failed to fetch chunk ${index}`);
//         }
//         const buffer = await response.arrayBuffer();
//         chunks[index] = buffer;
//         completedChunks++;
//         onProgress(Math.round((completedChunks * chunkSize / totalSize) * 100));
//         //  下载的进度
//     }
// };

// 稳定版本  视频拆分
// const getVedioSplitInfo = async () => {
//     // 不存在视频id
//     if (!videoId) {
//         message.error('视频id不存在')
//         return
//     }
//     textLoding.value = true
//     // 传入'setInterval'代表需要自动增加进度
//     loding.value.showModal('')

//     const videoData = await request.get('/work_ai', `/user/shotstack/video/video_to_clips/detail?id=${videoId.value}`)
//     console.log(videoData, '获取视频详情');
//     const { material_duration, clip_points, origin_clips, status, split_type_text } = videoData.result
//     title.value = [route.meta.title, split_type_text]
//     // 赋值保存到本地
//     splitData.value = videoData.result

//     // 截取时间数据
//     frameTimes.value = origin_clips?.video_clips
//     frameTimesClone.value = frameTimes.value

//     // 视频总时长
//     const videoLen = origin_clips.duration

//     // 获取元素
//     const videoElement = document.querySelector('#videoElement')
//     const videoUrl = videoData.result?.video?.material_url
//     // const videoUrl = 'https://cos.kuaijingai.com/upload/work_ai/20240305/65e6f4034cd8937599.mp4'
//     videoElement.src = videoUrl + '?v=' + (new Date()).valueOf()  // 赋值视频链接
//     const canvasElement = document.querySelector('#canvasElement')
//     canvasElement.crossOrigin = "Anonymous";

//     const ctx = canvasElement.getContext('2d');
//     // 开始处理每个时间段 等待视频元数据加载完成
//     await new Promise(resolve => {
//         videoElement.addEventListener('loadedmetadata', resolve, { once: true });
//         console.log(videoElement.videoWidth, videoElement.videoHeight, '视频宽高');
//     });

//     // 设置canvas的大小缩放
//     canvasElement.width = (videoElement.videoWidth * 0.8);
//     canvasElement.height = (videoElement.videoHeight * 0.8);
//     // 遍历时间段并截图
//     let forTime = Math.ceil(videoLen / interval.value) // 向上取整
//     console.log(forTime, '总次数');
//     for (let i = 0; i < forTime; i++) {
//         // 计算当前帧的时间
//         let currentTime = interval.value * i;
//         // console.log(currentTime, '当前帧');
//         if (currentTime > videoLen) {
//             currentTime = videoLen
//             // console.log(currentTime, '最后一帧');
//         }
//         // 设置视频的当前播放时间
//         videoElement.currentTime = currentTime
//         // 等待视频跳转到该时间点
//         await new Promise(resolve => {
//             videoElement.addEventListener('seeked', resolve, { once: true });
//         });
//         // 绘制当前视频帧到canvas上
//         ctx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
//         // 将当前帧转换为base64编码的图片
//         const base64ImageData = canvasElement.toDataURL('image/jpeg', 1);
//         imgArr.value.push({
//             ruler: currentTime === 0,
//             src: base64ImageData,
//             time: currentTime,
//             text: ""
//         });
//         // 通知loding组件增加进度
//         const progressPercentage = Math.floor((i + 1) / forTime * 100);
//         // 更新进度条组件的进度
//         loding.value && loding.value.updatePercent(progressPercentage);

//         if (currentTime === videoLen) break
//     }
//     // 如果是按照时间拆分或者 口播(口播按照节点加载视频下方文字对话)
//     if (splitData.value.split_type === "interval" || splitData.value.split_type === "audio") {
//         // 最接近 0.25的可以切割的数字
//         for (let index = 0; index < frameTimes.value.length; index++) {
//             const element = frameTimes.value[index]
//             // 结束时间, 通常也是打节点的时间
//             let splitTime = Math.round(element.end_time * 4) / 4
//             markTime.value.push(splitTime)
//             console.log(splitTime, 'splitTime');
//             // 如果有口播, 给对应的时间点 添加文字展示
//             if (splitData.value.split_type == "audio") {
//                 // 起始时间
//                 let begin_time = Math.round(element.begin_time * 4) / 4
//                 // 开始节点的下标
//                 let imgIndex = imgArr.value.findIndex(ele => ele.time == begin_time)
//                 if (imgIndex !== -1) {
//                     // 将字符串切割为5的倍数(每个块儿5个字符串)
//                     let splitString = element.text.match(/.{1,5}/g) || [];
//                     // 将字符串分割为5个一组, 分配给起始位置之后的每一个格子
//                     splitString.forEach((item, index) => {
//                         if (imgIndex + index < imgArr.value.length) {
//                             imgArr.value[imgIndex + index] = Object.assign({}, imgArr.value[imgIndex + index], {
//                                 text: item,
//                             });
//                         }
//                     })
//                 }

//                 imgArr.value.forEach(item => {
//                     if (item.time >= begin_time && item.time <= splitTime) {
//                         item.color = bgColor.value,
//                             item.splitTime = splitTime,
//                             item.begin_time = begin_time
//                     }
//                 })
//                 bgColor.value = bgColor.value == '#f7e1e5' ? '#e8f4fe' : '#f7e1e5'
//             }
//         }
//         imgArrClone.value = JSON.parse(JSON.stringify(imgArr.value))
//         markTimeClone.value = JSON.parse(JSON.stringify(markTime.value))

//     }

//     // 关闭加载中状态
//     isShow.value = false
//     loding.value && loding.value.closeModal()
//     textLoding.value = false
// }


const isProcessing = ref(true);

const processVideo = async (videoElement, canvasElement, ctx, videoLen, interval) => {
    const forTime = Math.ceil(videoLen / interval);

    const toBlob=(el)=>{
        return new Promise((resolve)=>{
            el.toBlob(function(blob) {
                const url = URL.createObjectURL(blob);
                resolve(url)
            }, 'image/jpeg');  
        })
    }   
    const processFrame = async (i) => {
        if (!isProcessing.value) return; // 检查是否继续处理

        let currentTime = interval * i;
        if (currentTime > videoLen) currentTime = videoLen;

        videoElement.currentTime = currentTime;
        await new Promise(resolve => {
            videoElement.addEventListener('seeked', resolve, { once: true });
        });

        if (!isProcessing.value) return; // 再次检查是否继续处理

        ctx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
        const base64ImageData = await toBlob(canvasElement);
        // const base64ImageData = canvasElement.toDataURL('image/jpeg', 1);

        imgArr.value.push({
            ruler: currentTime === 0,
            src: base64ImageData,
            time: currentTime,
            text: ""
        });
        // debugger
        const progressPercentage = Math.floor((i + 1) / forTime * 100);
        // if (i % Math.floor(forTime / 100) === 0 || currentTime === videoLen) {
        // if (currentTime === videoLen) {
        loding.value && loding.value.updatePercent(progressPercentage);
        // }
    };

    for (let i = 0; i < forTime; i++) {
        await processFrame(i);
        if (!isProcessing.value) break; // 检查是否需要退出循环
    }
};

const getVedioSplitInfo = async () => {
    if (!videoId.value) {
        message.error('视频id不存在');
        return;
    }
    // debugger
    textLoding.value = true;
    loding.value.showModal('');

    // 创建一个函数用于延迟
    const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

    let videoData
    const getVideo = async () => {
        videoData = await request.get('/work_ai', `/user/shotstack/video/video_to_clips/detail?id=${videoId.value}`);
        if (videoData?.result?.is_polling == 1) {
            await delay(5000)
            await getVideo()
        }
    }

    await getVideo()

    console.log(videoData, '获取视频详情');
    const { material_duration, clip_points, origin_clips, status, split_type_text } = videoData.result;
    title.value = [route.meta.title, split_type_text];
    splitData.value = videoData.result;
    frameTimes.value = origin_clips?.video_clips;

    // 判断如果没有拆分信息, 返回列表页
    if (!frameTimes.value) {
        Modal.warning({
            title: '提示',
            content: '当前视频无拆分信息!',
            onOk() {
                router.push({
                    name: 'VideoIntelligentSplitList',
                })
            },
            onCancel() {
                router.push({
                    name: 'VideoIntelligentSplitList',
                })
            }
        });
        return
    }

    frameTimesClone.value = frameTimes.value;

    const videoLen = origin_clips.duration;
    const videoUrl = videoData.result?.video?.material_url || videoData.result?.material_url

    const videoElement = document.querySelector('#videoElement');
    // videoElement.src = videoUrl
    videoElement.src = videoUrl + '?v=' + (new Date()).valueOf();
    const canvasElement = document.querySelector('#canvasElement');
    const ctx = canvasElement.getContext('2d');

    await new Promise(resolve => {
        videoElement.addEventListener('loadedmetadata', resolve, { once: true });
    });

    canvasElement.width = videoElement.videoWidth * 0.1;
    canvasElement.height = videoElement.videoHeight * 0.1;

    // 分段处理视频帧
    await processVideo(videoElement, canvasElement, ctx, videoLen, interval.value);

    if (splitData.value.split_type === "interval" || splitData.value.split_type === "audio") {
        frameTimes.value.forEach(element => {
            const splitTime = Math.round(element.end_time * 4) / 4;
            markTime.value.push(splitTime);
            console.log(splitTime, 'splitTime');
            if (splitData.value.split_type == "audio") {
                const begin_time = Math.round(element.begin_time * 4) / 4;
                const imgIndex = imgArr.value.findIndex(ele => ele.time == begin_time);
                if (imgIndex !== -1) {
                    const splitString = element.text.match(/.{1,5}/g) || [];
                    splitString.forEach((item, index) => {
                        if (imgIndex + index < imgArr.value.length) {
                            imgArr.value[imgIndex + index] = {
                                ...imgArr.value[imgIndex + index],
                                text: item,
                            };
                        }
                    });
                }
                imgArr.value.forEach(item => {
                    if (item.time >= begin_time && item.time <= splitTime) {
                        item.color = bgColor.value;
                        item.splitTime = splitTime;
                        item.begin_time = begin_time;
                    }
                });
                bgColor.value = bgColor.value == '#f7e1e5' ? '#e8f4fe' : '#f7e1e5';
            }
        });
        imgArrClone.value = JSON.parse(JSON.stringify(imgArr.value));
        markTimeClone.value = JSON.parse(JSON.stringify(markTime.value));
    }

    // 清理不必要的变量
    frameTimes.value = [];
    frameTimesClone.value = [];

    isShow.value = false;
    loding.value && loding.value.closeModal();
    textLoding.value = false;
};

onBeforeUnmount(() => {
    isProcessing.value = false; // 停止处理视频
});



// const getVedioSplitInfo = async () => {
//     if (!videoId.value) {
//         message.error('视频id不存在');
//         return;
//     }
//     textLoding.value = true;
//     loding.value.showModal('');

//     const videoData = await request.get('/work_ai', `/user/shotstack/video/video_to_clips/detail?id=${videoId.value}`);
//     console.log(videoData, '获取视频详情');
//     const { material_duration, clip_points, origin_clips, status, split_type_text } = videoData.result;
//     splitData.value = videoData.result;
//     frameTimes.value = origin_clips?.video_clips;
//     frameTimesClone.value = frameTimes.value;

//     const videoLen = origin_clips.duration;
//     const videoUrl = videoData.result?.video?.material_url;

//     const videoBlob = await downloadInChunks(videoUrl);
//     const videoElement = document.querySelector('#videoElement');
//     videoElement.src = URL.createObjectURL(videoBlob);
//     const canvasElement = document.querySelector('#canvasElement');
//     const ctx = canvasElement.getContext('2d');

//     await new Promise(resolve => {
//         videoElement.addEventListener('loadedmetadata', resolve, { once: true });
//     });

//     canvasElement.width = videoElement.videoWidth * 0.8;
//     canvasElement.height = videoElement.videoHeight * 0.8;

//     const forTime = Math.ceil(videoLen / interval.value);
//     console.log(forTime, '总次数');

//     const processFrame = async (i) => {
//         let currentTime = interval.value * i;
//         if (currentTime > videoLen) currentTime = videoLen;

//         videoElement.currentTime = currentTime;
//         await new Promise(resolve => {
//             videoElement.addEventListener('seeked', resolve, { once: true });
//         });

//         ctx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
//         const base64ImageData = canvasElement.toDataURL('image/jpeg', 1);
//         imgArr.value.push({
//             ruler: currentTime === 0,
//             src: base64ImageData,
//             time: currentTime,
//             text: ""
//         });

//         const progressPercentage = Math.floor((i + 1) / forTime * 100);
//         if (i % Math.floor(forTime / 100) === 0 || currentTime === videoLen) {
//             loding.value && loding.value.updatePercent(progressPercentage);
//         }
//     };

//     const framePromises = [];
//     for (let i = 0; i < forTime; i++) {
//         framePromises.push(processFrame(i));
//     }
//     await Promise.all(framePromises);

//     if (splitData.value.split_type === "interval" || splitData.value.split_type === "audio") {
//         frameTimes.value.forEach(element => {
//             const splitTime = Math.round(element.end_time * 4) / 4;
//             markTime.value.push(splitTime);
//             console.log(splitTime, 'splitTime');
//             if (splitData.value.split_type == "audio") {
//                 const begin_time = Math.round(element.begin_time * 4) / 4;
//                 const imgIndex = imgArr.value.findIndex(ele => ele.time == begin_time);
//                 if (imgIndex !== -1) {
//                     const splitString = element.text.match(/.{1,5}/g) || [];
//                     splitString.forEach((item, index) => {
//                         if (imgIndex + index < imgArr.value.length) {
//                             imgArr.value[imgIndex + index] = {
//                                 ...imgArr.value[imgIndex + index],
//                                 text: item,
//                             };
//                         }
//                     });
//                 }
//                 imgArr.value.forEach(item => {
//                     if (item.time >= begin_time && item.time <= splitTime) {
//                         item.color = bgColor.value;
//                         item.splitTime = splitTime;
//                         item.begin_time = begin_time;
//                     }
//                 });
//                 bgColor.value = bgColor.value == '#f7e1e5' ? '#e8f4fe' : '#f7e1e5';
//             }
//         });
//         imgArrClone.value = JSON.parse(JSON.stringify(imgArr.value));
//         markTimeClone.value = JSON.parse(JSON.stringify(markTime.value));
//     }

//     isShow.value = false;
//     loding.value && loding.value.closeModal();
//     textLoding.value = false;
// };

// const downloadInChunks = async (url, chunkSize = 1024 * 1024, maxConcurrentRequests = 5) => {
//     const response = await fetch(url);
//     if (!response.ok) {
//         throw new Error(`Failed to fetch data from ${url}`);
//     }
//     const totalSize = parseInt(response.headers.get('Content-Length'), 10);
//     const numChunks = Math.ceil(totalSize / chunkSize);
//     const chunks = [];
//     const chunkPromises = [];
//     let completedChunks = 0;

//     const controller = new AbortController();
//     const signal = controller.signal;

//     const onProgress = (progress) => {
//         loding.value && loding.value.updatePercent(progress);
//     };

//     for (let i = 0; i < numChunks; i++) {
//         const start = i * chunkSize;
//         const end = Math.min((i + 1) * chunkSize - 1, totalSize - 1);
//         chunkPromises.push(downloadChunk(url, start, end, signal, totalSize, i));
//     }

//     while (chunkPromises.length > 0) {
//         const promisesToProcess = chunkPromises.splice(0, maxConcurrentRequests);
//         await Promise.all(promisesToProcess.map(promise => promise.catch(error => { })));
//     }

//     controller.abort();

//     return new Blob(chunks);

//     async function downloadChunk(url, start, end, signal, totalSize, index) {
//         const response = await fetch(url, {
//             headers: { Range: `bytes=${start}-${end}` },
//             signal,
//         });
//         if (!response.ok) {
//             throw new Error(`Failed to fetch chunk ${index}`);
//         }
//         const buffer = await response.arrayBuffer();
//         chunks[index] = buffer;
//         completedChunks++;
//         onProgress(Math.round((completedChunks * chunkSize / totalSize) * 100));
//     }
// };


/**
 * 拖拽逻辑
 */
const rulerPosition = ref(0); // 初始标尺位置
const dragging = ref(false);
// 控制可以拖拽的元素
const dragerTarget = ref('not')
const dragStart = (event) => {
    // 拖动开始时，设置传输数据
    console.log(event.target.classList, '开始拖动');
    if (event.target.classList.contains("ruler")) {
        dragerTarget.value = 'ruler'
    } else if (event.target.classList.contains("point")) {
        dragerTarget.value = 'point'
    } else {
        dragerTarget.value = 'not'
        event.preventDefault()
    }
};

// 游标拖动结束
const dragEnd = (event) => {
    dragerTarget.value = 'not'
};

// 打点拖动结束
const pointDragend = (event, ele) => {
    // pointActive.value 为即将移动的值
    if (!valiDate(pointActive.value, ele.time)) {
        event.preventDefault()
        pointActive.value = null
        return
    } else {
        const index = markTime.value.findIndex(item => item === ele.time)
        if (index !== -1) {
            markTime.value.splice(index, 1, pointActive.value)
            pointActive.value = null
        }
    }
    dragerTarget.value = 'not'
}


// 控制打点显示
const pointActive = ref(null)
// 拖拽进入
const dragEnter = (event, element) => {
    if (dragerTarget.value === 'ruler') {
        active.value = element.time
    } else if (dragerTarget.value === 'point') {
        pointActive.value = element.time
    }
}

// 拖拽离开
const dragLeave = (event, element) => {
    // 移除打点高亮显示
}

// 校验数据是否符合规则
const valiDate = (val, selectPoint = null) => {
    const fullTime = splitData.value.origin_clips.duration
    if (val === 0 || val < 1 || val > (fullTime - 1)) {
        message.warning('拆分间隔不可小于1秒');
        return false
    } else if (markTime.value.includes(val)) {
        // 判断是否重复
        message.warning('当前已存在切割点');
        return false
    } else if (!valiDateOnesecond(val, selectPoint)) {
        // 判断是否有其他标点在左右, 导致剪辑时间小于1s 
        message.warning('拆分间隔不可小于1秒');
        return false
    }
    return true
}

// 判断即将添加的值间隔是否小于一秒
const valiDateOnesecond = (val, selectPoint) => {
    let flage = true
    for (let index = 0; index < markTime.value.length; index++) {
        const element = markTime.value[index];
        console.log(selectPoint, element, 'element');
        if (element > val && element - val < 1) {
            // 当前项不等于 已高亮选择的项
            if (selectPoint !== element) {
                flage = false
            }
        } else if (val > element && val - element < 1) {
            if (selectPoint !== element) {
                flage = false
            }
        }
    }
    console.log(flage, 'flage');
    return flage
}

/**
 * 交互逻辑
 */
// 直接点击某个容器, 修改游标位置, 或者点击的是游标, 添加标点数据
const moveRuler = (event, val) => {
    const nodeName = event.target.nodeName
    let xlink
    if (nodeName === 'svg') {
        let children = event.target.children
        if (children) {
            xlink = children[0].getAttribute('xlink:href')
        }
    } else if (nodeName == 'use') {
        xlink = event.target.getAttribute('xlink:href')
    }
    const isEventList = ['ruler', 'ruler__content', 'split', 'icon-jianqie', 'icon-youbiao1-copy']
    // 判断 点击的是不是游标
    const isTargetInList = isEventList.some(className => event.target.classList.contains(className));
    // 判断点击的是否是 point
    const eventList = ['point', 'point__content', 'icon-youbiao1-copy-point']
    const isPointClick = eventList.some(className => event.target.classList.contains(className));
    if (isTargetInList || xlink == '#icon-jianqie' || xlink == '#icon-youbiao-copy') {
        // 判断是否符合规则
        if (!valiDate(val.time)) return
        markTime.value.push(
            val.time
        )
        active.value = val.time + interval.value
        // 点击point
    } else if (isPointClick || xlink == '#icon-youbiao_blue' || xlink == '#icon-youbiao1-red') {

    } else {
        active.value = val.time
        // 修改当前播放视频的时间
        videoElement.value.currentTime = active.value

    }
}

// 选中后的按键事件
const keydown = (event) => {
    if (event.key === 'ArrowLeft') {
        if (event.ctrlKey) {
            // Ctrl + 左箭头
            console.log('Ctrl + 左箭头被按下');
            ctrlAndKeyDown('left')
        } else {
            console.log('左箭头被按下');
            keydownLeftOrRight('left')
        }
    } else if (event.key === 'ArrowRight') {
        if (event.ctrlKey) {
            // Ctrl + 右箭头
            console.log('Ctrl + 右箭头被按下');
            ctrlAndKeyDown('right')
        } else {
            // 只是右箭头
            console.log('右箭头被按下');
            keydownLeftOrRight('right')
        }
    } else if (event.key === 'Delete') {
        delPoint()
    }
}

// 单纯点击左或者右键, 切换当前选择的point
const keydownLeftOrRight = (val) => {
    // 如果当前有选中的point
    if (selectPoint.value) {
        // 只是左箭头, 修改当前高亮的point
        const index = markTime.value.findIndex(item => item == selectPoint.value)
        if (index !== -1) {
            let nextPoint = val === 'left' ? selectPoint.value - interval.value : selectPoint.value + interval.value
            // 校验移动后的位置 是否符合规则
            if (!valiDate(nextPoint, selectPoint.value)) return

            markTime.value.splice(index, 1, nextPoint)
            selectPoint.value = nextPoint
            // pointActive.value = null
            console.log(markTime.value, '打点数组');
        }
    }
}

// 侦听全局点击, 取消高亮
const WindowClick = (event) => {
    if (selectPoint.value) {
        // 判断点击的是否是 point
        const eventList = ['point', 'point__content', 'icon-youbiao1-copy-point']
        const isPointClick = eventList.some(className => event.target.classList.contains(className));
        const xlink = event.target.getAttribute('xlink:href')
        // 点击下面这些标签, 不会让当前高亮的游标清空
        const targetIconList = ['#icon-kuaijinyou', '#icon-youbiao_blue', '#icon-youbiao1-red', '#icon-kuaijinzuo']
        const nodeName = event.target.nodeName
        console.log(event.target.classList, 'window点击事件');
        let nodeChildren
        nodeName == 'svg' && (nodeChildren = event.target.children[0].getAttribute('xlink:href'))
        console.log(nodeName, nodeChildren);
        // 判断点击的是否是控制按钮
        const concor = event.target.dataset.concor
        const text = event.target.textContent
        if (!isPointClick && text !== '上一个' && text !== '下一个' && concor !== 'concor' && !targetIconList.includes(xlink) && !targetIconList.includes(nodeChildren)) {
            selectPoint.value = null
        }
    }
}

// 当前选中的point的index
const isSelectPointIndex = computed(() => {
    return markTime.value.findIndex(item => item == selectPoint.value)
})

// ctrl+左或者右箭头, 切换选择的point目标
const ctrlAndKeyDown = (val) => {
    console.log(isSelectPointIndex.value, 'isSelectPointIndex');
    // 如果当前有选中的point
    const len = sortMarkTime.value.length
    console.log(sortMarkTime.value, 'markTime.value');
    if (selectPoint.value && len) {
        if (isSelectPointIndex.value !== -1 && len) {
            if (val === 'left') {
                if (isSelectPointIndex.value - 1 >= 0) {
                    selectPoint.value = sortMarkTime.value[isSelectPointIndex.value - 1]
                } else {
                    selectPoint.value = sortMarkTime.value[len - 1]
                }
            } else if (val == 'right') {
                if (isSelectPointIndex.value + 1 < len) {
                    selectPoint.value = sortMarkTime.value[isSelectPointIndex.value + 1]
                } else {
                    selectPoint.value = sortMarkTime.value[0]
                }
            }
        }
    } else {
        selectPoint.value = sortMarkTime.value[0]
    }
}

// 选择某个point
const selectPointChange = (event, val) => {
    selectPoint.value = val.time
}

// 删除某个point
const delPoint = () => {
    const index = markTime.value.findIndex(item => item == selectPoint.value)
    if (index !== -1) {
        markTime.value.splice(index, 1)
    }
}

// 重置point点位
const resetPoint = () => {
    console.log(markTime.value, 'markTime.value');
    console.log(markTimeClone.value, 'markTimeClone');
    markTime.value = JSON.parse(JSON.stringify(markTimeClone.value))
    active.value = 0
    selectPoint.value = null
}

// 将秒转换为时分秒
const ShowTime = computed(() => {
    // 将总秒数分成整数部分和小数部分
    const totalSecondsInt = Math.floor(active.value); // 整数秒
    const milliseconds = Math.floor((active.value - totalSecondsInt) * 1000); // 小数转换成毫秒

    // 计算时、分、秒
    const hours = Math.floor(totalSecondsInt / 3600);
    const minutes = Math.floor((totalSecondsInt % 3600) / 60);
    const seconds = totalSecondsInt % 60;

    if (hours) {
        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`;
    } else {
        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}:${milliseconds ? milliseconds.toString().padStart(3, '0') : milliseconds.toString().padStart(2, '0')}`;
    }
    // 格式化时间，确保小时和分钟是两位数，毫秒是三位数
})

// 更新动画函数
let animationFrameId = null;
let lastTimestamp = null;
const animateFn = (timestamp) => {
    if (lastTimestamp === null) {
        lastTimestamp = timestamp;
    }
    const delta = (timestamp - lastTimestamp) / 1000;
    lastTimestamp = timestamp;
    if (active.value + delta < splitData.value.origin_clips.duration) {
        active.value += delta;
        console.log(active.value, 'delta');
        animationFrameId = requestAnimationFrame(animateFn);
    } else {
        active.value = 0;
    }
}

// 倒计时 和 视频播放开始和暂停
const isPlaying = ref(false);
const togglePlay = () => {
    if (progressTime.value == 0) isPlaying.value = false
    if (isPlaying.value) {
        // 暂停
        cancelAnimationFrame(animationFrameId);
        // 暂停播放
        videoElement.value.pause()
    } else {
        // 播放
        lastTimestamp = null; // 重置时间戳
        animationFrameId = requestAnimationFrame(animateFn);
        // 设置播放时间, 开始播放
        videoElement.value.currentTime = active.value;
        videoElement.value.play()

    }
    isPlaying.value = !isPlaying.value;
};

// 格式化进度条时间显示
const progressTime = computed(() => {
    // 四舍五入到最近的0.25秒
    // const roundedSeconds = Math.ceil(active.value / 0.25) * 0.25;
    const roundedSeconds = Math.ceil(active.value / interval.value) * interval.value;
    if (roundedSeconds > splitData.value.origin_clips.duration) {
        return 0
    }
    console.log(roundedSeconds, 'roundedSeconds');
    return roundedSeconds
});

// 保存视频切割节点
const saveVideoSlice = () => {
    // 校验是否有节点
    if (markTime.value.length === 0) return message.error('至少需要一个拆分点')
    currentSaveData.value.material_url = splitData.value.material_url
    saveVisible.value = true
    // saveVideoData()
}

// 子组件emit函数, 提交数据
const saveVideoData = (params) => {
    materials.value.stopLoding()
    saveVisible.value = false
    setTimeout(() => {
        router.push({
            name: 'VideoIntelligentSplitList'
        })
    }, 300)
    console.log(params, 'params传参898989898989898989999999');
    // const data = {
    //     // 视频文件夹id
    //     merchant_folder_statck_id: params,
    //     // 视频id
    //     id: splitData.value.id,
    //     // 视频切割点
    //     clip_points: getClipPoints()
    // }
    // request.post("/work_ai", "/user/shotstack/video/submit_video_clips", data).then(res => {
    //     message.success('保存成功！请等待处理完成!')
    //     // 关闭组件内的加载效果
    //     materials.value.stopLoding()
    //     saveVisible.value = false
    //     setTimeout(() => {
    //         router.push({
    //             name: 'VideoIntelligentSplitList'
    //         })
    //     }, 300)
    // })
}

// 获取对应的提交数据
const getClipPoints = () => {
    let data = []
    sortMarkTime.value.forEach((item) => {
        data.push({
            time: item.toString(),
        })
    })
    return data
}

// 返回上一页
const goBack = () => {
    router.push({
        name: 'VideoIntelligentSplitList'
    })
}


// 获取元素对应的颜色
function getBackgroundColor(val) {
    let colorIndex = 0;  // 用来标识当前颜色，0代表粉色，1代表蓝色

    for (let i = 0; i < sortMarkTime.value.length; i++) {
        // 如果当前时间小于等于标记点时间，则返回当前颜色
        if (val.time < sortMarkTime.value[i]) {
            return colorIndex % 2 === 0 ? '#f7e1e5' : '#e8f4fe';
        }
        // 如果当前时间大于标记点时间，移动到下一个颜色
        colorIndex++;
    }

    // 如果当前时间超过了所有标记，根据最后一个标记决定颜色
    return colorIndex % 2 === 0 ? '#f7e1e5' : '#e8f4fe';
}

</script>

<template>
    <div class="smart_clip">
        <div>
            <RouteTitle :isBack="true" :title="title" />
        </div>

        <div class="smart_clip_header">
            <a-popover placement="bottomLeft" :getPopupContainer="triggerNode => {
                return triggerNode.parentNode;
            }
                ">
                <template #content>
                    <div class="icon_item">
                        <div class="iconHint">←</div>
                        <span>拆分点向左移动一帧</span>
                    </div>
                    <div class="icon_item">
                        <div class="iconHint">→</div>
                        <span>拆分点向右移动一帧</span>
                    </div>
                    <div class="icon_item">
                        <div class="iconHint"><span class="caption">ctrl +</span> ←</div>
                        <span>选择上一个拆分点</span>
                    </div>
                    <div class="icon_item">
                        <div class="iconHint"><span class="caption">ctrl +</span> →</div>
                        <span>选择下一个拆分点</span>
                    </div>
                    <div class="icon_item">
                        <div class="iconHint"><span class="caption">delet</span></div>
                        <span>删除当前拆分点</span>
                    </div>
                </template>
                <template #title>
                    <span>Title</span>
                </template>
                <a-button style="background-color: #ffffff00;">操作提示</a-button>
            </a-popover>
        </div>

        <div class="ai-wirting mt-20">
            <a-card class="a-card-Body">
                <div class="imgList">
                    <div v-for="(element,) in imgArr" :key="element.time" class="imgItem"
                        :class="{ 'imgItem--dragging': dragging, }" @dragenter="dragEnter($event, element)"
                        @dragleave="dragLeave($event, element)" @click="moveRuler($event, element)">
                        <!-- 每一项的游标 -->
                        <div class="ruler" v-show="progressTime === element.time" draggable="true"
                            @dragstart="dragStart" @dragend="dragEnd">
                            <div class="ruler__content">
                                <div class="split">
                                    <cu-icon data-icon="icon-jianqie" class="icon icon-jianqie" type="icon-jianqie"
                                        style="font-size: 18px" />
                                </div>
                                <cu-icon class="icon icon-youbiao1-copy" type="icon-youbiao-copy" />
                            </div>
                        </div>
                        <!-- 每一项的打点标记 -->
                        <a-popover :getPopupContainer="triggerNode => { return triggerNode.parentNode; }"
                            overlayClassName="pops" trigger="click" style="padding: 0;"
                            :visible="selectPoint == element.time">
                            <template #content>
                                <p style="padding: 8px 14px; white-space: nowrap; color: #ffffff;"> 选中后可用←/→进行微调 </p>
                            </template>
                            <div class="point" :class="{ 'pointa_Active': selectPoint === element.time }"
                                @dragstart="dragStart" @dragend="pointDragend($event, element)"
                                @click="selectPointChange($event, element)"
                                v-show="markTime.includes(element.time) || pointActive === element.time"
                                draggable="true">
                                <div class="point__content">
                                    <cu-icon class="icon-youbiao" type="icon-youbiao_red" style="font-size: 14px;" />
                                    <!-- <cu-icon class="icon-youbiao" type="icon-youbiao_blue" style="font-size: 14px;"
                                        v-else /> -->
                                </div>
                            </div>
                        </a-popover>

                        <div class="content_item" draggable="false">
                            <img class="img" crossOrigin="anonymous" :src="element.src" alt="">
                            <div v-if="splitData.split_type == 'audio' && !textLoding" class="text_box"
                                :style="{ backgroundColor: getBackgroundColor(element) }">
                                <p class="item_text">{{ element.text }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 视频控制面板 -->
                <div class="controls">
                    <!-- {{ 'active'+ active }} -->
                    <div class="timeLive">
                        <span>当前: {{ ShowTime }}</span>
                        <br>
                        <!-- <span>视频总时长: {{ (splitData?.material_duration / 1000).toFixed(2) + 's' }}</span> -->
                        <span>视频总时长: {{ splitData?.material_duration ? (splitData?.material_duration / 1000).toFixed(2)
                            + 's' : '' }}</span>
                    </div>

                    <!-- 播放 点位选择 -->
                    <div class="centerControls">
                        <div @click="ctrlAndKeyDown('left')" class="icon_box"
                            style="cursor: pointer; width: 30px; height: 30px;">
                            <cu-icon class="icon" type="icon-kuaijinzuo" style="font-size: 30px;" />
                        </div>
                        <div v-if="!isPlaying" class="bofang3" @click="togglePlay"
                            style="cursor: pointer; width: 30px; height: 30px;">
                            <cu-icon class="icon" type="icon-bofang3" style="font-size: 28px;" />
                        </div>
                        <div v-else @click="togglePlay" style="cursor: pointer; width: 30px; height: 30px;">
                            <cu-icon style="font-size: 30px;" class="icon" type="icon-weibiaoti519" />
                        </div>
                        <div @click="ctrlAndKeyDown('right')" style="cursor: pointer; width: 30px; height: 30px;">
                            <cu-icon style="font-size: 30px;" class="icon" type="icon-kuaijinyou" />
                        </div>

                    </div>
                    <!-- 右侧控制 -->
                    <div class="rightBtns">
                        <a-button class="deleteBtn" size="small" @click="delPoint">删除拆分点</a-button>
                        <a-button size="small" @click="resetPoint">重置</a-button>
                    </div>
                </div>

                <!-- 保存和返回 -->
                <div class="saveOrBack">
                    <a-button class="saveBtn" type="primary" @click="saveVideoSlice">保存</a-button>
                    <a-button @click="goBack">返回</a-button>
                </div>
            </a-card>
        </div>
        <!-- 这个video元素用于加载和控制视频 "https://cos.kuaijingai.com/upload/work_ai/20240305/65e6f4034cd8937599.mp4" -->
        <video id="videoElement" ref="videoElement" style="display: none;" crossOrigin="anonymous" controls
            preload="auto" src="" />
        <!-- 这个canvas元素用于绘制视频帧 -->
        <canvas id="canvasElement" ref="canvasElement" style="display: none;"></canvas>

        <!-- 保存到文件夹弹窗@selfSubmit="saveVideoData"  -->
        <!-- <MaterialsModule ref="materials" jobCategory="videoSplit" :requestType="true" :material_type="'video'"
            @selfRequest="saveVideoData" :visible="saveVisible" :data="currentSaveData"
            @onCancel="saveVisible = false" /> -->


        <!-- 保存到文件夹弹窗@selfSubmit="saveVideoData"  -->
        <MaterialsModule ref="materials" jobCategory="videoSplit" :aisave="true" :requestType="true"
            :material_type="'video'" :splitVideoId="splitData?.id" @selfRequest="saveVideoData" :visible="saveVisible"
            :data="currentSaveData" :clip_points="getClipPoints()" @onCancel="saveVisible = false" />

        <!-- 加载中弹窗 -->
        <lodingModel ref="loding" :btnConfig="{
            show: true,
            text: '取消本次拆分',
            isDanger: true,
        }" :contentText="'视频素材分析中....'" type="primary" :baseIncrement="1"
            @cancel="$router.push({ path: 'videoIntelligentSplitList' })" :marskClose="false"></lodingModel>
    </div>
    <!-- detailed="可稍后在列表中查看并进行下一步操作" -->
</template>

<style scoped lang="less">
.icon-youbiao1-copy {
    color: #0076ff;
}

.smart_clip_header {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-top: 30px;

    :deep(.ss-popover-inner-content) {
        .icon_item {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 8px;

            .iconHint {
                height: 30px;
                padding: 0 6px 3px 6px;
                font-size: 20px;
                background-color: #fafafc;
                border: 1px solid #cecece;
                line-height: 25px;

                .caption {
                    font-size: 15px;
                }
            }
        }
    }

    :deep(.icon_item) {}



}


::v-deep(.ss-card-body) {
    padding: 0 24px 24px 24px;
}

::v-deep(.ss-btn) {
    border-radius: 6px;
}

.saveOrBack {
    margin-top: 20px;
    display: flex;
    justify-content: start;

    .saveBtn {
        margin-right: 10px;
    }
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .timeLive {

        width: 95px;
        flex: 1;
    }

    .rightBtns {
        // margin-left: auto;
        // margin-top: 20px;
        flex: 1;
        display: flex;
        justify-content: end;

        .deleteBtn {
            margin-right: 10px;
        }
    }

    .centerControls {
        flex: 1;
        display: flex;
        gap: 15px;
        justify-content: center;

        .icon_box {
            display: flex;
            width: 35px;
            height: 35px;
            justify-content: center;
            align-items: center;
        }

        .bofang3 {
            padding-left: 6px;
        }
    }
}

.imgList {


    display: flex;
    flex-wrap: wrap;

    .imgItem {

        ::deep(.ss-popover-inner) {
            background-color: #ffffff00;
        }

        :deep(.ss-popover-inner-content) {
            padding: 0px !important;
            background-color: #262626;
            border-radius: 6px;
        }

        :deep(.ss-popover-placement-top) {
            padding-bottom: 0;
        }

        :deep(.ss-popover-placement-top) {
            top: -37px !important
        }

        :deep(.ss-popover-arrow-content) {
            background-color: #262626;
        }



        padding-top: 24px;
        position: relative;

        .content_item {
            img {
                width: 70px;
                height: 40px;
                //    object-fit: cover;
                object-fit: cover;
            }

            .text_box {
                height: 28px;
                overflow: hidden;
                line-height: 28px;

            }
        }

        .ruler {
            position: absolute;
            height: 40px;
            width: 10px;
            z-index: 999;
            top: 20px;
            left: -4px;
            cursor: pointer;

            .ruler__content {
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: center;

                .split {
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    vertical-align: middle;
                    top: 10px;
                    left: calc(50% - 10px);
                    z-index: 99;
                    height: 20px;
                    width: 20px;
                    background-color: rgb(255, 255, 255);
                    border-radius: 10px;
                    opacity: 0;

                    .icon-jianqie {
                        font-size: 14px;
                        line-height: 20px;
                        text-align: center;
                    }
                }

                .icon-youbiao1-copy {
                    position: relative;
                    font-size: 16px;
                    top: -12px;
                    z-index: 10;
                }

                &::after {
                    content: '';
                    position: absolute;
                    top: 0px;
                    height: 50px;
                    border-radius: 25px;
                    width: 4px;
                    background-color: var(--ss-primary-color);
                    border: 0.5px solid #fff;
                }
            }

            &:hover {
                & .split {
                    opacity: 1;
                    cursor: pointer;
                }
            }
        }

        .point {
            position: absolute;
            width: 8px;
            z-index: 998;
            top: 7px;
            left: -4px;
            cursor: pointer;

            .point__content {
                width: 100%;
                // height: 50px;
                display: flex;
                justify-content: center;

                .icon-youbiao {
                    position: relative;
                    top: 5px;
                    z-index: 10;
                    font-size: 12px;
                    color: #0076ff;
                    fill: #0076ff;

                    use {
                        fill: #0076ff;
                        color: #0076ff;

                    }
                }

                &::after {
                    content: '';
                    position: absolute;
                    top: 15px;
                    height: 43px;
                    border-radius: 25px;
                    width: 4px;
                    background-color: red;
                    border: 0.5px solid #fff;
                }
            }
        }

        // point 高亮选择的样式
        .pointa_Active {
            .point__content {
                &::after {
                    background-color: red;
                    ;
                }

                .icon-youbiao1-copy-point {
                    color: #0076ff
                }
            }
        }


    }

}
</style>